<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>VUE的组件：目的是为了复用代码</p>
    <p>组件传值的两种情况：父传子、子传父</p>
    <p>1.父传子：父组件将数据传给子组件</p>
    <p>2.子传父：子组件将数据传给父组件</p>
    <!-- 2.当做标签使用 -->
    <!-- 父传子的第一步：传递数据，这个数据来自父组件 -->
    <vdiv :year="year1"></vdiv>
    <vdiv :year="year2"></vdiv>
    <vdiv :year="year3"></vdiv>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          year1: 21,
          year2: 22,
          year3: 23,
        }
      },
      // 1.注册组件
      components: {
        vdiv: {
          template: `
            <div>
              <p>湖南工业大学</p>
              <p>欢迎{{year}}级新生入学</p>
              <button @click="welcome">欢迎</button>
              <hr />
            </div>
          `,
          data() {
            return {
              
            }
          },
          // 父传子的第二步：接受数据，接受之后当做子组件中的data来用
          props: ['year'],
          methods: {
            welcome() {
              alert(`欢迎${this.year}级新生入学,请到2号楼缴费`)
            }
          },
        },
      }
    })
  </script>
</body>
</html>